<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>flf-评论列表</title>
  <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/iconfont.css">
  <link rel="stylesheet" href="./css/main.css">
  <link rel="stylesheet" href="./libs/layui/css/layui.css">
  <link rel="stylesheet" href="./libs/layui/css/modules/layer/default/layer.css">
  <script src="./libs/jquery/jquery.min.js"></script>
  <script src="./libs/layui/layui.js"></script>
  <script src="./libs/layui/lay/modules/layer.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="common_title">
      评论列表
    </div>
    <div class="container-fluid common_con">
      <table class="table table-striped table-bordered table-hover mp20">
        <thead>
          <tr>
            <th>作者</th>
            <th>评论</th>
            <th>评论在</th>
            <th>提交于</th>
            <th>状态</th>
            <th class="text-center" width="150">操作</th>
          </tr>
        </thead>
        <tbody id="tbody">
        </tbody>
      </table>
      <div id="pager" class="row text-center">
        <!-- 分页控件 -->
      </div>
    </div>
  </div>
  <!-- 引入构造的用于 获取连接登录接口的数据 -->
  <script src="../admin/js/http.js"></script>
  <script src="../js/template-web.js"></script>
  <script id="con_data" type="text/html">
    {{each data}}
    {{if $value.state == '已拒绝'}}
  <tr class="danger">
    {{else if $value.state == '已通过'}}
    <tr class="ok">
    {{else}}
    <tr>
      {{/if}}
            <td>{{$value.author}}</td>
            <td>{{$value.content}}</td>
            <td>{{$value.title}}</td>
            <td>{{$value.date}}</td>
            <td>{{$value.state}}</td>
            <td class="text-center">

              {{if $value.state == '待审核'}}
              <a href="javascript:void(0);;" onclick="pass({{$value.id}})" class="btn btn-info btn-xs">批准</a>
              <a href="javascript:void(0);;" onclick="refuse({{$value.id}})" class="btn btn-warning btn-xs">拒绝</a>
              {{else if $value.state == '已批准'}}
              <a href="javascript:void(0);;" onclick="refuse({{$value.id}})" class="btn btn-warning btn-xs">拒绝</a>
              {{else}}
              <a href="javascript:void(0);;" onclick="pass({{$value.id}})" class="btn btn-info btn-xs">批准</a>
              {{/if}}
              <a href="javascript:void(0);;" onclick="del({{$value.id}})" class="btn btn-danger btn-xs">删除</a>
            </td>
          </tr>
    {{/each}}
  </script>
  <script>

    $(function () {
      /* 1.0 调用评价接口函数 */
      getlist();
    })


    /* 1.0 获取评论数据函数 */
    function getlist(curr, perpage) {

      let arr = { page: curr, perpage: perpage }

      /* 1.1 发送获取数据请求  */
      myAjax('get', '/admin/comment/search', arr, function (gl) {
        /* 获取的数据类型
         {
            "code": 200,
            "msg": "数据获取成功",
            "data": {
                "totalCount": 7999,
                "totalPage": 800,
                "data": [{
                    "id": 7999,
                    "author": "唐磊",
                    "content": "业声又必应做马体听第它光九多件合自方大设改着象省是把即起计。",
                    "date": "2020-6-29",
                    "time": "05:02:11",
                    "state": "已拒绝",
                    "articleId": 148,
                    "title": "特朗普指责中方破坏协议？外交部：美方又想混淆视听转嫁责任"
                }]
            }
        }*/

        /* 1.2 添加到模块中 */
        let list = template('con_data', gl.data);
        $('#tbody').html(list);

        /* 1.3 调用分页控件 传入请求中的到的 totalCount  和curr页数 */
        page_render(gl.data.totalCount, curr);
      })

    }

    /* 2.0 添加分页控件 */
    function page_render(count, curr) {

      layui.use('laypage', function () {
        var laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
          elem: 'pager',
          count: count,//数据总数，从服务端得到
          limit: 6,  //每页显示数量
          curr: curr,   //显示第几页
          jump: function (obj, first) {
            /* 返回两个值
              // obj.curr表示用户点击的当前页码
              // obj.limit表示此分页控件每页显示的条数
            */
            //首次不执行
            if (!first) {
              getlist(obj.curr, obj.limit)
            }
          }
        });
      });
    }

    /* 3.0 实现拒绝修改 */
    /* 3.1 对拒绝按钮进行挂载点击事件 */
    function refuse(id) {
      /* 3.2 提示用户是否继续操作 */
      layer.confirm('确定拒绝?她会很可怜的', { icon: 3, title: '提示' }, function (index) {

        /* 3.3 发送拒绝请求 */
        myAjax('post', '/admin/comment/reject', { id: id }, function (gl) {
          if (gl.code !== 200) {
            layer.msg('拒绝失败,您没有该权限');
            return;
          }
          /* 3.4 重新刷新页面 */
          getlist();
        })

        //提示结尾
        layer.close(index);
      });
    }

    /*4.0 实现批准修改 */
    /*4.1 对批准按钮进行挂载点击事件 */
    function pass(id) {
      /* 4.2 提示用户是否继续操作 */
      layer.confirm('确定通过?她会很开心的', { icon: 3, title: '提示' }, function (index) {

        /* 4.3 发送通过请求 */
        myAjax('post', '/admin/comment/pass', { id: id }, function (gl) {
          if (gl.code !== 200) {
            layer.msg('批准失败,您没有该权限');
            return;
          }
          /* 4.4 重新刷新页面 */
          getlist();
        })

        //提示结尾
        layer.close(index);
      });
    }

    /*4.0 实现删除修改 */
    /*4.1 对删除按钮进行挂载点击事件 */
    function del(id) {
      /* 4.2 提示用户是否继续操作 */
      layer.confirm('确定删除?她会很伤心的', { icon: 3, title: '提示' }, function (index) {

        /* 4.3 发送删除请求 */
        myAjax('post', '/admin/comment/delete', { id: id }, function (gl) {
          if (gl.code !== 200) {
            layer.msg('删除失败,您没有该权限');
            return;
          }
          /* 4.4 重新刷新页面 */
          getlist();
        })

        //提示结尾
        layer.close(index);
      });
    }
  </script>
</body>

</html>